<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>悬浮框效果</title>
  </head>
  <style>
    :root {
      --width-fudong: 200px;
      --height-fudong: 60px;
    }
    .bg {
      background-color: #ebe7e7;
      position: relative;
      /* top: 30%; */
      right: 2px;
      bottom: 3px;
      width: 900px;
      height: 1400px;
    }
    .bg > div {
      display: inline-block;
      height: var(--height-fudong);

      width: var(--width-fudong);
      margin: 10px 10px;
      position: relative;
      background-color: pink;
    }
    /* .xuanfu {
      display: none;
    } */
    .xuanfu {
      /* display: block; */
      position: sticky;
      /* float: left; */

      width: 300px;
      min-height: 30px;
      /* translate: calc(var(--width-fudong) + 10px) calc(-20px); */
transform: translateX(calc(var(--width-fudong) + 10px)) translateY(-20px);

      border-radius: 10px;
      padding: 5px;
      background-color: #555;
      z-index:100;
    }
    .xuanfu::after {
      content: "";
      display: block;
      position: absolute;
      border-left: 8px solid transparent;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;

      border-right: 8px solid #555;
      left:-14px;
      top:20px;
      z-index: 99;
    }
    .bg>div:hover .xuanfu{
        display: block;
        position: fixed;
    }

.mainContent{
  padding: 10px 20px;
  color: #e9e9e9;
  font-size: 14px;

}

.childrendiv>span{
  display: block;
  padding-top: 5px;
  
}
.tim>span{
  display: block;
padding:2px 5px;

}
.content{
  padding: 20px 5px;
}
.tim{
  border-left: 2px solid #fff;
  padding-left: 10px;
}
  </style>
  <body>
    
    <div class="bg">
      <div>
        席位
        <div class="xuanfu">
<!-- 悬浮框内容 -->
 <div class="mainContent">
  <div class="childrendiv">
    <span>点位名称 :</span>
    <span>当前普通占用量(人次) :</span>
    <span>当前 vip 占用量(人次) :</span>
<hr />
    <div class="content">
      <div class="tim">
      <span>团队名称：</span>
      <span>团队级别：</span>
      <span>团队人数：</span>
    </div>
    </div>
</div>
</div>

        </div>
      </div>

    </div>
    <script type="text/javascript">

    </script>
  </body>
</html>
